|
目录
4.创建微信小程序项目4.1获取appid
5.配置app.json5.1添加页面5.2修改顶部框样式5.3添加taber底部导航栏
本人框架入门，此处记录完成一个前后端分离项目笔记，若有错误，还望指正，持续更新中…
4.创建微信小程序项目
微信公众平台 (qq.com)
微信开放文档 (qq.com)
4.1获取appid
 登录微信公众平台获取自己对应的appid并创建项目，不选择云服务，使用js模板。 
5.配置app.json
5.1添加页面
创建完成微信小程序项目后，在app.json中添加页面代码 
"pages":[
"pages/index/index",
"pages/cate/cate",
"pages/store/store",
"pages/my/my",
"pages/logs/logs"
],
5.2修改顶部框样式
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#6b8770",
"navigationBarTitleText": "易物",
"navigationBarTextStyle":"white"
},
5.3添加taber底部导航栏
"tabBar": {
"color": "#999",
"selectedColor": "#6b8770",
"backgroundColor": "#ededed",
"position": "bottom",
"borderStyle": "black",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/homef.png"
},{
"pagePath": "pages/cate/cate",
"text": "类型",
"iconPath": "icons/cate.png",
"selectedIconPath": "icons/catef.png"
},{
"pagePath": "pages/store/store",
"text": "物品库",
"iconPath": "icons/store.png",
"selectedIconPath": "icons/storef.png"
},{
"pagePath": "pages/my/my",
"text": "个人中心",
"iconPath": "icons/my.png",
"selectedIconPath": "icons/myf.png"
}]
},
图标的需要自己阿里巴巴矢量图标库进行下载 iconfont-阿里巴巴矢量图标库 下载后放在pages同级文件的icons中，通过路径进行引入。 最终完成效果 
|